* {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box;
    border: 0 none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

body 
{
    background: #eeeeee;
    font-family: Arial, Verdana;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

.icon
{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
    padding: 0px;
}

.icon.adminpanel
{
    background: url('Images/icons.png') no-repeat -21px -66px;
}

.icon.rightarrow
{
    background: url('Images/icons.png') no-repeat -46px 2px;
    width: 7px;
    height: 20px;
}

.icon.coin
{
    background: url('Images/coin.png') no-repeat center center;
    background-size: 100%;
    width: 16px;
    height: 16px;
}

.box
{
    display: block;
    background-color: ghostwhite;
    border: 1px solid lightgray;
}

.box .title
{
    font-weight: bolder;
    padding: 10px;
    background: rgb(245, 245, 245);
    color: #000;
    font-size: 16px;
    border-bottom: 1px solid lightgray;
}

.box .title:hover
{
    padding: 10px;
    background: rgb(245, 245, 245);
    color: #000;
    font-size: 16px;
}


.box .content
{
    padding: 10px;
}

.box.login-box
{
    width: 400px;
    margin: 100px auto;
}

.box.b400
{
    width: 400px;    
}

.box.b800
{
    width: 800px;
}

.box.full
{
    margin: 20px 20px;
}

.box.center
{
    margin: 20px auto;
}

#navigator
{
    background: rgb(245, 245, 245);
    color: #000;
    border-bottom: 1px solid lightgray;
    margin: 0px;
    padding: 0px;
}

#navigator .logo
{
    padding: 10px;
    display: block;
}

.label
{
    display: table-cell;
    width: 150px;
}

.input
{
    display: table-cell;
    padding: 5px;
}

.input .textfield
{
    margin: 0px;
    padding: 4px 10px;
    background-color: lightgray;
    border: 1px solid lightgray;
    outline: none;
}

.input .textfield:focus
{
    background-color: #fff;
    border: 1px solid #687A9F;
}

.button 
{
    display: table-cell;
    padding: 5px 20px;
    background-color: #00CAF2;
    color: darkslateblue;
    text-decoration: none;    
    transition-duration: 0.3s;
    color: #fff;
    font-weight: bolder;
    border: 0px solid lightgray;
    border-radius: 2px;
}

.button:hover
{
    cursor: pointer;
    color: #fff;
    background-color: #C43C4A;
}

#subnavigation
{
    height: 20px;
    background: ghostwhite;
    border-bottom: 1px solid lightgray;
}

#navigator ul.buttons
{
    margin: 0px;
    display: block;
    float: right;
    padding-right: 20px;
}

#navigator ul.buttons li
{
    display: table-cell;     
    margin: 0px;
}

#navigator ul.buttons li a
{
    display: table-cell;
    font-weight: bolder;
    text-decoration: none;
    margin: 0px;
    padding: 10px;
    color: #000;
}

#navigator ul.buttons li:hover
{
    background-color: rgba(255, 255, 255, 0.5);
}

table.data
{
    width: 100%;
    border: 0px;    
    padding: 0px;
    margin: 0px;    
}

table.data tr.header td
{
    background: #dcdcdc;
    padding: 10px;
    font-weight: bolder;
    border-bottom: 1px solid #687A9F;
    color: #666;
}

#left-panel, #right-panel
{
    transition-duration: 0.3s;
}

body.hideleft #navigator
{
    position: absolute;
    top: 0px;
    width: 50px;
    height: 43px;
    transition-duration: 0.3s;
}

body.hideleft #navigator .text, body.hideleft #navigator .buttons, body.hideleft #subnavigation
{
    display: none;    
}

body.hideleft #left-panel
{
    width: 50px;
    padding-top: 43px;
    border-right: 0px;
}

body.hideleft #left-panel .title
{
    border-bottom: none;
}

body.hideleft #left-panel .title .text
{
    display: none;
}

body.hideleft #left-panel .info, body.hideleft #left-panel .autohide
{
    display: none;
}

body.hideleft #right-panel
{
    margin: 0px 0px 0px 50px;
    border-width: 0px;
}

#left-panel 
{
    width: 220px;
    height: 800px;
    float: left;
    background-color: ghostwhite;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

#left-panel .item, #left-panel .statistic
{
    border-bottom: 1px solid lightgray;
    padding: 5px 10px;
    text-decoration: none;
    color: black;
    display: block;
}

#left-panel .statistic
{
    background-color: lightyellow;
    cursor: pointer;
}

#left-panel .item:hover
{
    background-color: lightyellow;
    cursor: pointer;
    color: #687A9F;
    transition-duration: 0.3s;
    margin-left: 10px;
    border-left: 3px solid #687A9F;
}

#left-panel .title
{
    font-size: 18px;
    margin: 0px;
    padding: 0px;
}

#left-panel .info .number
{
    font-weight: bolder;
    font-size: 20px;
}

#right-panel
{
    margin: 10px 10px 10px 230px;
}

.box .toolbar .button .popup
{
    display: none;
    padding: 0px;
    margin: 0px;
    position: absolute;
    width: 150px;
    border: 1px solid lightgray;
}

.box .toolbar .button:hover .popup
{
    display: block;
}

.box .toolbar .button.sub
{
    display: block;
}

.box .toolbar .button
{
    margin: 0px;
    background-color: ghostwhite;
    color: #687A9F;
    border-right: 1px solid lightgray;
}


.box .toolbar .button:hover
{
    background-color: wheat;
    color: white;
}

.box .toolbar
{
    border-bottom: 1px solid lightgray;
}

.table
{
    display: table;
    width: 100%;
    margin: 0px;
    padding: 0px !important;
    border-bottom: 1px solid darkgray;
}

.table .item
{
    display: table-row;
    width: 100%;
    
    padding: 0px;
    margin: 0px;
}

.table .item .column
{
    display: table-cell;
    width: auto;
    padding: 5px 10px;
}

.table .item .column.unfinished-task
{
	background-color: #900000;
	width: 30px;
	color: white;
}

.table .item:hover .column.unfinished-task
{
	background-color: #ff0000;
	width: 20px;
	color: white;
}

.table .item .column.no-codereview
{
	width: 20px;
	color: white;
}

.table .item .column.id
{
    over-flow: hidden;
    min-width: 20px;
    width: 50px;
    background-color: lightyellow;
    border-right: 1px solid lightgray;
    transition-duration: 0.3s;
}

.leftonly .table .item .column.id
{
	width: 20px;	
}

.table .item:hover .column
{
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.table .item .column.button
{
    border-radius: 0px;
}

.table .item:hover .column.button
{
    background-color: #687A9F;
}

.table .item .column.string
{
}

.table .item .column.number
{
    min-width: 50px;
}

.table .item .column.action
{
    min-width: 40px;
    text-align: right;
}

.bold
{
    font-weight: bolder;
}

.container
{
    display: table;
    width: 100%;
}

.container .left
{
    display: inline-block;
    width: 25%;
    transition-duration: 1.0s;
    vertical-align: top;
}

.container .right
{
    width: 75%;
    display: inline-block;
    background: rgb(245, 245, 245);    
    transition-duration: 1.0s;
    border-left: 1px solid lightgray;
    transition-duration: 1.0s;
    position: relative;
}

.container .autohide
{
    display: none !important;
}

.leftonly .autoshow
{
    display: none !important;
}

.container.leftonly .left
{
    display: inline-block;
    width: 100%;
    transition-duration: 1.0s;
    border-right: 1px solid lightgray;
}



.container.leftonly .autohide
{
    display: table-cell !important;
}


.container .right.wide
{
    width: auto;   
}

.container.leftonly .right
{
    width: 0px;
    overflow: hidden;    
}

.right .box
{
    border: 0px;
}

.icon.user 
{
    background: url('Images/icons.png') no-repeat -59px -85px;
}

.icon.calendar 
{
    background: url('Images/icons.png') no-repeat 0 -21px;
}

.icon.group 
{
    background: url('Images/icons.png') no-repeat -21px 0;
}

.icon.task 
{
    background: url('Images/icons.png') no-repeat -19px -21px;
    width: 18px;
}

.icon.document
{
    background: url('Images/icons.png') no-repeat -61px -66px;
    height: 18px;
}

.icon.notification
{
    background: url('Images/icons.png') no-repeat 0 -42px;
    width: 18px;
}



input[type=checkbox] {
    position: absolute; 
    overflow: hidden; 
    height:1px; 
    width:1px; 
    margin:-1px; 
    padding:0;
    border:0;
    opacity: 0.0;
}

input[type=checkbox] + label {
    padding-left: 30px;
    height: 22px; 
    display: inline-block;
    line-height: 22px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    vertical-align: middle;
    cursor: pointer;
    background-image:url(Images/check.png); 
}

input[type=checkbox]:checked + label {
    background-position: 0px bottom;
    color: #00CAF2;
}

.question .ask {
    font-size: 13px;
    font-weight: bolder;    
}

.question .ask .number {
    display: inline-block;
    width: 30px;
    padding-right: 5px;
    background-color: lightyellow;
}

.review
{
	padding-bottom: 10px;
}

.review.content, .review.editor, .question textarea, .question .answer .editor, .question .answer div.answer
{
    font-family: Arial, Verdana;
    color: #000;
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.0);
    outline: none;
    background-color: #BBDCFF;
    padding: 5px;
}

.review.content, .review.editor {
    border-color: #ddd;
    background-color: #fff;
}

.content.code-reviews
{
	background-color: #ded;
}

.question .answer div.answer.best
{
    background-color: lightgreen;
}


.question textarea:hover, .question textarea:focus, .question .editor:hover, .question .editor:focus
{
    border: 1px solid lightblue;
    background-color: #FFF;
}

.question .answer
{
    padding: 10px 35px;
    transition-duration: 0.5s;
}

.loading
{
    background: url(Images/ajax-loader.gif) no-repeat 10px 10px;
    padding-top: 25px !important;
    transition-duration: 0.2s;
}

.label.loading
{
    padding-top: 0px !important;
    padding-left: 50px;
}

.comments
{
    padding: 3px 3px 3px 25px;
    background: url(Images/comment.png) no-repeat 3px 5px;    
    display: block;
    cursor: pointer;
    margin: 0px 0px 0px auto;
    width: 40px;
    border-radius: 3px 3px 0px 0px;
    background-color: #BBDCFF;
}

.comments:hover
{
    background-color: #687A9F;
}

.comments.expand
{
    border-bottom: 0px;
}

.comments-content
{
    background-color: #BBDCFF;
    padding: 3px 10px 10px 10px;    
}

.comments-content .comment
{
    border: 1px solid lightgray;
    background-color: white;
    padding: 5px 10px;
    margin-top: 10px;    
}

.grid
{
    padding: 0px;
    margin: 0px;
}

.grid .cell
{
    display: inline-block;
    width: 25%;
    margin: 0px;
    padding: 5px;
    transition-duration: 0.2s;
}

.hideleft .grid .cell
{
    width: 20%;
}

.grid .cell .box
{
    border: 1px solid lightgray;
    height: 100px;
    overflow: hidden;
    cursor: pointer;
    background: url(../Images/3dcover.jpg) center center;
    background-size: 100% auto;
    opacity: 0.5;
    position: relative;
}

.grid .cell .box:hover
{
    opacity: 1.0;
}

.grid .cell .box.add
{
    opacity: 0.8;
    background: rgb(245, 245, 245);
    padding: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: bolder;
}

.grid .cell .box .panel
{
    position: absolute;
    bottom: -50px;
    right: 0px;
    left: 0px;
    background-color: white;
    transition-duration: 0.5s;
}

.grid .cell .box:hover .panel
{
    bottom: 0px;
}

/* media adjustment */
@media screen and (max-width: 1000px)
{
    .grid .cell
    {
        width: 33%;
    }
    
    .hideleft .grid .cell
    {
        width: 25%;
    }

}

@media screen and (max-width: 800px)
{
    .grid .cell
    {
        width: 50%;
    }
    
    .hideleft .grid .cell
    {
        width: 33%;
    }

}

@media screen and (max-width: 600px)
{
    .grid .cell
    {
        width: 100%;
    }
    
    .hideleft .grid .cell
    {
        width: 50%;
    }
}

.course-banner
{       
    height: 200px;
    position: relative;
    overflow: hidden;
}

.course-banner .background
{
     background-size: 100% auto;
    background-position: center center;
    opacity: 0.2;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.course-banner .course-description
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.editor
{
    color: #000;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.0);
}

.name.editor
{
    color: #000;
    font-size: 18px;
    padding: 10px;
    font-weight: bolder;
    outline: none;
}

.description.editor
{
    outline: none;
    color: #000;
    padding: 10px;
}

.item:hover .column.editor:focus, .column.editor:focus
{
    background-color: #687A9F;
}

label.editor, .question .answer label.editor
{
    width: 100%;
    padding: 0px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.0);
    background-color: #fff;
}

label.editor:focus, .question .answer label.editor:focus
{
    background-color: #ACBEDF;  
}

.combobox
{
    /* Size and position */
    position: relative;
    margin: 0px 0px;
    min-width: 200px;
    display: inline-block;
    padding: 10px;
 
    /* Styles */
    background: #fff;
    /* border-radius: 7px; */
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
    cursor: pointer;
    outline: none;
 
    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
}

.combobox:after 
{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}

.combobox .dropdown 
{
    position: absolute;
    top: 120%;
    left: 0;
    right: 0;
 
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    transition: all 0.25s ease-in;
    list-style: none;
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
    
    z-index: 100;
}

.combobox.active
{
    background-color: #4cbeff;
    color: #fff;
}

.combobox.active .dropdown 
{
    opacity: 1;
    pointer-events: auto;
}

ul 
{
    margin: 0px;
    padding: 0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.combobox .dropdown li a 
{
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    transition: all 0.1s ease-out;
}
 
.combobox .dropdown li i 
{
    float: right;
    color: inherit;
}

 
.combobox .dropdown li:hover a 
{
    background-color: #4cbeff;
    color: #fff;
}

.combobox  .dropdown:after 
{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}
 
.combobox  .dropdown:before
{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}

.wrong 
{
    color: red !important;
    text-decoration: line-through;
}

.best-selection
{
    font-weight: bolder !important;
    color: green !important;
}

.clear
{
    clear: both;
}

/** Rating CSS **/
.rating a {
    text-decoration: none;
    background: url(Images/coin.png) no-repeat center center;
    padding: 6px;
    background-size: 100%;
    transition-duration: 0.25s;
}

.rating.unrated a {
    opacity: 0.4;
}

.rating.unrated:hover a {
    opacity: 1.0;
}

.rating  a:hover ~ a, .rating a.checked ~ a  {
    opacity: 0.4;
}

.rating:hover a.checked ~ a {
    opacity: 1.0;
}

.rating:hover a:hover ~ a {
    opacity: 0.4;
}

.rating.disabled.unrated:hover a, .rating.disabled:hover a.checked ~ a {
    opacity: 0.4 !important;
}

.rating.disabled:hover a {
    opacity: 1.0 !important
}

.progress {
    background-color: aliceblue;
    color: darkslateblue;
}

.review-state {
    background-color: #00CAF2;
    color: #fff;
    padding: 5px;
}

.review-state.client {
    background-color: aliceblue;
    border: 1px solid #BBDCFF;
    border-width: 0px 1px;
    color: #000;
}

.review-state .state {
    background-color: pink;
    color: red;
    padding: 2px 10px;
}

.review-state .state.s1 {
    background-color: greenyellow;
    color: black;
    padding: 2px 10px;
}

.review-state .state.s2 {
    background-color: gray;
    color: black;
    padding: 2px 10px;
}

.review-state .state.s3 {
    background-color: darkslateblue;
    color: white;
    padding: 2px 10px;
}

.summary {
    position: fixed;
    top: 10px;
    right: 20px;
    width: 250px;
    height: 40px;
    background: #fff;
    padding: 10px;
    border: 1px solid lightgray;
    display: none;
    font-weight: bolder;
}

.state3 {
    background-color: lightgray;
}

.state2 {
    background-color: lightyellow;
}

.state0 {
    background-color: white;
    color: darkslateblue;
    font-weight: bolder;    
}

.uploading {
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid lightgray;
}

.input-area {
    padding: 0px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
    margin: 2px 0px;
    outline: none;
    display: inline-block;
    cursor: pointer;
}

.input-area * {
    padding: 5px;
    font-weight: bolder;
    color: black;
    display: inline-block;
    outline: none;
}

.input-area b {
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    width: 150px;
    text-align: right;
}

.input-area input:focus {
    background-color: #4cbeff;
}

div.content.controller-box
{
	padding: 0px;
}

.tabbar
{
	background-color: rgba(0, 0, 0, 0.1);;
}

.tabbar .tab
{
	cursor: pointer;
	background-color: white;
	display: inline-block;
	padding: 5px 10px;
	color: black;
	border-bottom: 5px solid white;
}

.tabbar .tab.active
{
	background-color: aliceblue;
	border-bottom: 5px solid hotpink;
}

.tabbar .tab:hover
{
	background-color: rgba(0, 0, 0, 0.1); 
}

.hide-details #task .description,.hide-details .link
{
	display: none !important;
}

.hide-theory .theory
{
	display: none !important;
}

.hide-questions .questions
{
	display: none !important;
}

.hide-exercise .exercise
{
	display: none !important;
}

.hide-exercise .exercise, .hide-exercise .exercise-tasks
{
	display: none !important;
}

.hide-codereview .code-reviews, .hide-codereview .code-review-button
{
	display: none !important;
}

.hide-finished .review.s1
{
	display: none !important;
}

.hide-closed .review.s3
{
	display: none !important;
}

a.button, .buttons a
{
	position: relative;
}

.tip
{
	background-color: lightyellow;
	padding: 10px 20px;
	box-shadow: 0 1px 1px rgba(50,50,50,0.1);
	border: 1px solid lightgray;
	position: absolute;
	top: 110%;
	left: 0px;
	width: 300%;	
	color: black;
}

.tip:before
{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    left: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(255,255,204, 1.0) transparent;    
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
}